<template>
    <tr>
        <td>
            <input v-model="obj.checked" type="checkbox">
        </td>
        <td>{{obj.name}}</td>
        <td>{{obj.price}}</td>
        <td>
            <button @click="changeNum('-')">-</button>
            <span>{{obj.num}}</span>
            <button @click="changeNum('+')">+</button>
        </td>
        <td>
            {{  obj.price*obj.num }}
        </td>
        <td>
            <button @click="delFn">删除</button>
        </td>
    </tr>
</template>

<script>
/**
 * 需求1：封装组件
 * 1、创建myTr.vue组件
 * 2、布局，把数据通过父组件传递过来，子组件中props定义obj变量用于接收数据
 * 3、在父组件中，通过v-for，以标签属性的方式把数据传给子组件
 * 4、在子组件中，同obj进行数据渲染
 * 
 * 需求2：实现删除功能
 * 1、父传子，把索引值从父组件传递给子组件，将来用于通知父组件需要删除谁
 * 2、给删除按钮绑定点击事件，并声明事件处理函数
 * 3、在函数“子传父”，将需要删除的索引传递给父组件
 * 4、父组件中，通过绑定自定义事件，根据索引删除数据
 * 
 * 需求3：点击加或者减实现数量修改
 * 1、给加减按钮绑定点击事件，并声明事件处理函数
 * 2、在函数中，实现数量的修改即可
 * 
 * */ 
export default {
    props: [ "obj", "index" ],
    methods: {
        delFn(){
            // 子传父
            this.$emit("sendData", this.index);
        },
        changeNum(type){
            // 注意：这里只是修改了obj对象中的某个属性，obj对象本身是没有改变（内存地址没有改变的）
            // 因此 vue也不会监测到props的属性发生变化，也就不会报错了。
            if(type==="-"){
                // 数量的减少
                this.obj.num = this.obj.num<=1?1:this.obj.num-1;
            }else{
                // 数量的增加
                this.obj.num = this.obj.num+1;
            }
        }
    }
}
</script>

<style>

</style>